<template>
  <!-- 亮点设施 -->
  <div>
    <h2>亮点设施</h2>
    <div class="highlight-facilities">
      <div class="facility-item">
        <span><i class="icon icon-baggage"></i>行李寄存 免费</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-clock"></i>24小时前台</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-alarm"></i>叫醒服务</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-restaurant"></i>餐厅 <span class="detail-link">详细展示</span></span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-gym"></i>健身室</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-toothbrush"></i>儿童拖鞋</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-laundry"></i>洗衣房</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-robot"></i>机器人服务</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-toothbrush"></i>儿童牙刷</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-safe"></i>前台贵重物品保险柜</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-wifi"></i>公用区wifi 免费</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-dryer"></i>干衣机</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-security"></i>安保人员</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-ticket"></i>旅游票务服务</span>
      </div>
      <div class="facility-item">
        <span><i class="icon icon-smoke-free"></i>无烟楼层</span>
      </div>
    </div>
  </div>

  <!-- 儿童设施 -->
  <div>
    <h2>儿童设施</h2>
    <ul class="facility-list">
      <li><i class="icon icon-check"></i>儿童牙刷</li>
    </ul>
  </div>

  <!-- 前台服务 -->
  <div>
    <h2>前台服务</h2>
    <ul class="facility-list">
      <li><i class="icon icon-check"></i>前台贵重物品保险柜</li>
      <li><i class="icon icon-check"></i>旅游票务服务</li>
      <li><i class="icon icon-check"></i>快速入住退房</li>
    </ul>
  </div>

  <!-- 公共区 -->
  <div>
    <h2>公共区</h2>
    <ul class="facility-list">
      <li><i class="icon icon-check"></i>公用区wifi 免费</li>
      <li><i class="icon icon-check"></i>无烟楼层</li>
      <li><i class="icon icon-check"></i>电梯</li>
      <li><i class="icon icon-check"></i>公共区域禁烟</li>
    </ul>
  </div>

  <!-- 清洁服务 -->
  <div>
    <h2>清洁服务</h2>
    <ul class="facility-list">
      <li><i class="icon icon-check"></i>干衣机</li>
      <li><i class="icon icon-check"></i>熨衣服务</li>
      <li><i class="icon icon-check"></i>洗衣服务</li>
      <li><i class="icon icon-check"></i>熨斗/挂烫机</li>
      <li><i class="icon icon-check"></i>洗涤用具</li>
    </ul>
  </div>

  <!-- 安全与安保 -->
  <div>
    <h2>安全与安保</h2>
    <ul class="facility-list">
      <li><i class="icon icon-check"></i>安保人员</li>
      <li><i class="icon icon-check"></i>火灾报警器</li>
      <li><i class="icon icon-check"></i>灭火器</li>
      <li><i class="icon icon-check"></i>门禁系统</li>
      <li><i class="icon icon-check"></i>公共区域监控</li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: "HotelFacilities"
}
</script>

<style scoped>
h2 {
  margin-bottom: 10px;
}

.highlight-facilities {
  display: flex;
  flex-wrap: wrap;
}

.facility-item {
  margin-right: 30px;
  margin-bottom: 10px;
}

.facility-list {
  list-style: none;
  padding-left: 0;
}

.facility-list li {
  margin-bottom: 5px;
  display: inline-block;
  margin-right: 50px;
}

.icon {
  margin-right: 5px;
}

.detail-link {
  color: #42b983;
  cursor: pointer;
}
</style>